<!-- 新增/修改弹框 -->
<template>
	<!-- 新增/修改弹窗 -->
	<el-dialog
		v-model="visible"
		:width="screenWidth"
		:fullscreen="mobile === 'mobile'"
		:title="dialogAddOrEdit.title"
		draggable
		@close="closeDialog"
		close-icon="CloseBold"
	>
		<el-form
			ref="addOrEditFormRef"
			:model="formData"
			:rules="rules"
			v-loading="loading"
			label-width="80"
			size=""
		>
			<el-row justify="start" class="" style="margin-left: 30px">
				<el-col :span="24" class="">
					<label style="font-weight: bold">通知公告类型</label>
					<el-form-item label=" " prop="noticeType" label-width="0">
						<el-select v-model="formData.noticeType" clearable placeholder="请选择类型">
							<el-option
								v-for="item in AppNoticeType"
								:label="item.label"
								:key="item.value"
								:value="item.value"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="">
					<label style="font-weight: bold">标题</label>
					<el-form-item label=" " prop="title" label-width="0">
						<el-input v-model="formData.title" style="width: 100%" placeholder="请输入标题" />
					</el-form-item>
				</el-col>
				<el-col :span="24" class="">
					<label style="font-weight: bold">正文</label>
					<el-form-item label=" " prop="content" label-width="0">
						<div class="app-container">
							<editor v-model="formData.content" class="border-1" style="height: 400px" :style="{width: mobile === 'mobile' ? editorWidth+'px' : screenWidth - 100 + 'px'}"/>
						</div>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		
		<template #footer>
			<div class="dialog_footer">
				<el-button type="primary" :loading="loading" v-if="dialogAddOrEdit.detail !== '详情' " @click="handleSubmit">{{
						dialogAddOrEdit.footBtn
					}}</el-button>
				<el-button @click="closeDialog()">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import {ref, reactive, computed} from "vue";
import { NotifyForm } from "@/api/system/app/notify/types";
import { getDicts } from "@/store/modules/dict";
import { addNotify, editNotify, getNotifyInfo } from "@/api/system/app/notify/index";

import Editor from "@/components/WangEditor/index.vue";

import {useScreen} from "@/store/modules/screen";

const screenStore = useScreen()
const mobile = computed(() => ( screenStore.device ));
const editorWidth = computed(() => ( screenStore.screenWidth - 100 ));
const screenWidth = ref(900)

function initScreen(){
	if(mobile.value === 'mobile'){
		screenWidth.value = screenStore.screenWidth;
	}else {
		screenWidth.value = 900;
	}
}

const props = defineProps({
	dialogAddOrEdit: {
		type: Object,
		default: () => ({
			visible: false,
			title: "新增通知信息",
			footBtn: "新增",
			id: 0,
		}),
	},
});

const emit = defineEmits(["sendClose"]);

const loading = ref(false);
let visible = ref(props.dialogAddOrEdit.visible);
const formData = reactive<NotifyForm>({});
const addOrEditFormRef = ref(ElForm);

const rules = reactive<FormRules<NotifyForm>>({
	noticeType: [{ required: true, message: "请选择通知类型", trigger: "blur" }],
	title: [{ required: true, message: "请输入标题", trigger: "blur" }],
	content: [{ required: true, message: "请输入通知正文", trigger: "blur" }],
});

onMounted(async () => {
	initScreen()
	
	let tempFormData;
	if (props.dialogAddOrEdit.id) {
		loading.value = true;
		tempFormData = await getNotifyInfo(props.dialogAddOrEdit.id);
		tempFormData = tempFormData.data;
		Object.assign(formData, tempFormData);
		loading.value = false;
		tempFormData = null;
	}
});

/* 发送当前弹窗关闭 */
function sendClose(query) {
	emit("sendClose",query);
}

/**
 * 关闭弹窗
 */
function closeDialog(query) {
	visible.value = false;
	sendClose(query);
	resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
	addOrEditFormRef.value.resetFields();
	addOrEditFormRef.value.clearValidate();

	formData.id = undefined;
}

/**
 * 项目表单提交
 */
function handleSubmit() {
	addOrEditFormRef.value.validate((valid: any) => {
		if (valid) {
			loading.value = true;
			const id = formData.id;
			if (id) {
				editNotify(id, formData)
					.then((resp) => {
						if (resp.success === true) {
							ElMessage.success(resp.msg);
							closeDialog(true);
							loading.value = false;
						} else {
							ElMessage.warning(resp.msg);
							loading.value = false;
						}
					}).catch((e) => {
					console.log(e);
				})
			} else {
				addNotify(formData)
					.then((resp) => {
						if (resp.success === true) {
							ElMessage.success(resp.msg);
							closeDialog(true);
							loading.value = false;
						} else {
							ElMessage.warning(resp.msg);
							loading.value = false;
						}
					})
			}
		}
	});
}

const AppNoticeType = getDicts('appNoticeType')	//通知公告类型
</script>

<style lang="scss" scoped>
.d_left {
	margin-left: 60px;
}
:deep(.el-form-item) {
	flex-wrap: wrap;
}
.dialog_footer {
	// display: flex;
	// justify-content: center;
}

:deep(.el-input) {
	width: 200px;
}

:deep(.el-input__inner) {
	// width: 200px;
}

:deep(.el-input__wrapper) {
	width: 200px;
}

:deep(.el-form-item__label) {
	color: #696868;
	font-size: 13px;
}
</style>
